<template>
	<div class="mobilePageRecommendBox">
		<div class="NavigationItems textCenter userSelectNone">
			<div :class="{'NavigationItem':true,'active':CurrentSelectMode==1}" @click="handledChangeMode(1)">
				为你推荐
			</div>
			<div :class="{'NavigationItem':true,'active':CurrentSelectMode==0}" @click="handledChangeMode(0)">
				随机推荐
			</div>
		</div>
		<!-- <div class="textRight marginR15 ">
			<span class="cursorPointer textCenter"
				style="display: inline-block;width: 50px;background-color: red;">切换</span>
		</div> -->
		<div class="items" ref="RecommendRefMobile" v-loading="ListLoading">
			<div class="item" v-for="item in recommenList">
				<div class="baseMode">
					<el-image :src="item.url+'?w=200&h=200&q=75'"
						style="width: 150px;height: 150px;border-radius: 18px;" fit="fill">
						<div slot="error" class="image-slot">
							<el-image class="" style="width: 150px;height: 150px;border-radius: 18px;"
								:src="$handledImageError(item.url+'?w=200&h=200&q=75','tx')" fit="fill">
							</el-image>
						</div>
					</el-image>
					<div class="font16">{{item.username}}
						<i v-show="item.gender" class="el-icon-male" style="color: #00f;font-size: 18px;"></i>
						<i v-show="!item.gender" class="el-icon-female" style="color: #ff58b5;font-size: 18px;"></i>
					</div>
					<div class="font12">启程之时 {{item.createTime}} 启程 {{item.day}} 天 积分 {{item.Integral}} </div>
					<div class="" v-show="item.signature">
						<container-page :isshowIcon='false' :text="item.signature"></container-page>
					</div>
					<div :class="{hobbytags:true,'justifyContentCenter':item.isCenter}">
						<template v-for="hobby,index in item.hobbylist">
							<div class="hobbytag  " :key="hobby.key">
								<el-tag class="">{{hobby.value}}</el-tag>
							</div>
						</template>
					</div>
					<div class="add-friend marginT15 marginB15">
						<el-button type="primary" @click="handleAdd(item.Id)">加好友</el-button>
					</div>
				</div>
				<!-- <div class="cardMode" >
					<el-image class="userUrl" :src="item.url+'?w=200&h=200&q=75'" fit="fill">
						<div slot="error" class="image-slot">
							<el-image class="userUrl"
								:src="$handledImageError(item.url+'?w=200&h=200&q=75','tx')" fit="fill">
							</el-image>
						</div>
					</el-image>
				</div> -->
			</div>
			<div class=" textCenter color-smill cursorPointer" v-show="msgConfig.msglistResults"
				@click="handleChandeFriend">查看更多推荐</div>
			<div class="textCenter color-smill  userSelectNone" v-show="!msgConfig.msglistResults  &&recommenList.length!=0">—— 暂无更多 ——</div>
			<div class="marginT45" v-show="recommenList.length==0">
				<i class="iconfont icon-queshengye zwdtIcon"></i>
				<div class="color-smill">
					暂无符合要求的用户
				</div>
			</div>
			<div class="marginB45"></div>
		</div>
	</div>
</template>

<script>
	import {
		throttle,
		debounce,
		uniqueE
	} from "@/utils/common"
	import {
		formatTime,
		handledSHSArray,
		daysBetween
	} from "@/utils/base"
	import {
		getFriendList
	} from "@/api/friend"
	import {
		creatContacts
	} from "@/api/relationshipUser"
	import containerPage from "@/components/container/index"
	export default {
		name: "statePage",
		components: {
			containerPage
		},
		data() {
			return {
				ListLoading: false,
				CurrentSelectMode: 1, //当前选中的模式
				pageConfig: {
					pageSizes: 10, //条数
					pageNum: 1, //页数 第n页
				},
				activeItem: {
					code: 'like',
					hobbys: []
				},
				msgConfig: {
					minScrollBottom: 100, //距离msg底部height 小于？就查询
					isExecuteShowMore: false, //距离msg？部height
					msglistResults: false, //msg查询结果 false 终止查询
				},
				recommenList: [], //推荐列表

			}
		},
		mounted() {
			let _this = this
			//由用户点击加载 以下方法不执行
			// this.$refs["RecommendRefMobile"].addEventListener("scroll", function(e) {
			// 	if (_this.$refs["RecommendRefMobile"].scrollTop >= _this.msgConfig.minScrollBottom) {
			// 		if (_this.msgConfig.isExecuteShowMore && _this.msgConfig.msglistResults) {
			// 			_this.handleChandeFriend();//下拉加载
			// 		}
			// 	}
			// })
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo
			},

		},
		methods: {
			uniqueE,
			formatTime,
			handleAdd: debounce(function(otherId) {
				try {
					creatContacts({
						otherId
					}).then(res => {
						this.$message({
							message: res.message || "success",
							type: "success",
							duration: 1000
						})
					})
				} catch (e) {

				}
			}),
			changActive(code = 'like', mode = 1) {
				this.CurrentSelectMode = mode
				this.activeItem = {
					code,
					hobbys: this.$store.getters.userInfo.hobbylist || ""
				}
			},
			/**
			 * 获取哪方面的好友 
			 * @param {int} code 1 like ;0 random
			 * */
			handledChangeMode(code) {
				if (this.CurrentSelectMode == code) return
				this.CurrentSelectMode = code
				this.pageConfig.pageNum = 1;
				if (code) {
					//为你推荐
					this.changActive();
				} else if (code == 0) {
					this.activeItem.code = "random"
				} else {
					return;
				}
				this.handledGetList()
			},
			handledArray(list) {
				for (let i = 0; i < list.length; i++) {
					list[i] = {
						value: list[i],
						key: uniqueE(8, 16)
					}
				}
				return list
			},
			/**
			 * 获取推荐好友
			 *
			 **/
			handledGetList(code = false) {
				this.ListLoading = true;
				let obj = {
					...this.pageConfig,
					...this.activeItem
				}
				if (!code) {
					this.recommenList = []
				}
				this.msgConfig.isExecuteShowMore = false
				getFriendList(obj).then(res => {
					this.ListLoading = false;
					let list = res.data;

					if (list.length == 0 || list.length < this.pageConfig.pageSizes) {
						this.msgConfig.msglistResults = false
					} else {
						this.msgConfig.msglistResults = true
					}
					this.msgConfig.isExecuteShowMore = true
					//逻辑处理
					let nowDate = new Date();
					for (let i = 0; i < list.length; i++) {
						list[i].hobbylist = handledSHSArray(list[i], 'hobbylist');
						list[i].hobbylist = this.handledArray(list[i].hobbylist);
						list[i].isCenter = list[i].hobbylist.length < 3;
						list[i].day = daysBetween(nowDate, list[i].createTime);
						list[i].createTime = this.formatTime(list[i].createTime, "{y}-{m}-{d}")
					}

					if (!code) {
						this.recommenList = list;
					} else {
						this.recommenList = [...this.recommenList, ...list]
					}

				}).catch(err => {
					this.ListLoading = false;
					console.log(err);
				})
			},
			/**
			 * 查看更多
			 **/
			handleChandeFriend() {
				this.pageConfig.pageNum += 1
				this.msgConfig.msglistResults = false
				this.handledGetList(true)
			}
		},
		watch: {
			storeUserinfo: {
				deep: true, // 深度监听
				immediate: true, // 页面初始化时是否触发回调
				handler: function(value, oldVal) {
					if (!value.Id || this.$store.getters.isExecute) {
						return
					}
					this.changActive();
					this.pageConfig = {
						pageSizes: 10,
						pageNum: 1,
					}
					this.handledGetList();
				}
			},
		},

	}
</script>

<style scoped>
	.mobilePageRecommendBox {
		width: 100%;
		height: calc(100vh - 62px);
		background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);

	}

	.mobilePageRecommendBox .NavigationItems {
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
	}

	.mobilePageRecommendBox .NavigationItem {
		width: calc(100% - 20px);
		height: 30px;
		line-height: 30px;
		border-radius: 18px;
		margin: 0 10px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.mobilePageRecommendBox .NavigationItem:nth-child(1) {
		background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	}

	.mobilePageRecommendBox .NavigationItem:nth-child(2) {
		background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	}

	.mobilePageRecommendBox .NavigationItem:active {
		background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
	}

	.active {
		background-image: linear-gradient(to top, #007adf 0%, #00ecbc 100%) !important;
	}

	.mobilePageRecommendBox .items {
		position: fixed;
		width: calc(100% - 16px);
		height: calc(100vh - 92px);
		overflow: hidden;
		overflow-y: auto;
	}

	.mobilePageRecommendBox .items .item {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		/* min-height: 50vh; */

	}

	.baseMode {
		width: 100%;
		height: 100%;
		padding: 5px;
		box-sizing: border-box;
		border-radius: 18px;
		border: 1px solid #ffffff;
	}

	.hobbytags {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		overflow-x: auto;
	}

	.justifyContentCenter {
		justify-content: center;
	}

	.hobbytags .hobbytag {
		margin: 2px;
		display: inline-block;
	}

	/* 加好友按钮 */
	.add-friend .el-button {
		width: 60% !important;
		margin: 0 auto;
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		border-radius: 18px;
	}

	.add-friend .el-button:active {
		background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
	}

	.zwdtIcon {
		color: #ffffff;
		font-size: 180px;
	}
</style>